﻿@model DHQGHN.PM2.ViewModels.MappingArea_EnumViewModel
@{
    ViewBag.Title = "Phân công cán bộ - địa bàn";
    ViewBag.Group = "Quản lý chung";
    Layout = "~/Views/Shared/_LayoutAdmin.cshtml";
}
<link href="~/Content/standard_form_nhaplieu.css" rel="stylesheet" />
<link href="@Url.Content("~/Content/jquery-ui.1.10.2.css")" rel="stylesheet" type="text/css" />
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.js"></script>
<link href="~/Content/index.css" rel="stylesheet" />

<script>
    $(function () {
        @functions{
            public string GetAntiForgeryToken()
            {
                string cookieToken, formToken;
                AntiForgery.GetTokens(null, out cookieToken, out formToken);
                return cookieToken + "," + formToken;
            }
        }
        var Code = $('#GROUP').val();
        $(document).ready(function () {
            $('[data-toggle="tooltip"]').tooltip();
            var GroupCode = '@(Model.GROUP)';
            $('#defaultDiv').show();
            $('#divLoading').show();
            $.ajax({
                url: '@Url.Action("ddlGroup")',
                type: 'POST',
                datatype: 'json',
                headers: {
                    'VerificationToken': '@GetAntiForgeryToken()'
                },
                success: function (lstItems) {
                    $('#divLoading').hide();
                    $('#GROUP').show();
                    $('#GROUP').append('<option value = "-1">' +
                                 "--Chọn nhóm người dùng--" + '</option>');
                    $.each(lstItems, function (i, lstItem) {
                        if (lstItem.Value == GroupCode)
                            $('#GROUP').append('<option value="' + lstItem.Value + '" selected="selected">' +
                             lstItem.Text + '</option>');
                        else
                            $('#GROUP').append('<option value="' + lstItem.Value + '">' +
                             lstItem.Text + '</option>');
                    });
                },
                error: function (ex) {
                    $('#divLoading').hide();
                    alert('Lỗi kỹ thuật.' + ex);
                }
            });
            if (GroupCode != "") {
                $('#defaultDiv').hide();
                $.ajax({
                    url: '@Url.Action("IndexArea_EnumGrid")',
                    type: 'POST',
                    datatype: 'json',
                    headers: {
                        'VerificationToken': '@GetAntiForgeryToken()'
                    },
                    data: { GroupCode: GroupCode },
                    success: function (map) {
                        $('#gridContent').html(map);
                        $('#divLoading').hide();
                    },
                    error: function (ex) {
                        $('#divLoading').hide();
                        alert('Lỗi kỹ thuật.' + ex);
                    }
                })
            }
            return false;
        });
        $('#GROUP').change(function () {
            $('#MappingEnum').empty();
            $('div.pager').empty();
            $('#divLoading').show();
            var Code = $('#GROUP').val();
            if (Code != "-1") {
                $.ajax({
                    url: '@Url.Action("IndexArea_EnumGrid")',
                    type: 'POST',
                    datatype: 'json',
                    headers: {
                        'VerificationToken': '@GetAntiForgeryToken()'
                    },
                    data: { GroupCode: Code },
                    success: function (map) {
                        $('#gridContent').html(map);
                        $('#divLoading').hide();
                    },
                    error: function (ex) {
                        $('#divLoading').hide();
                        alert('Lỗi kỹ thuật.' + ex);
                    }
                })
                return false;
            } else {
                $('#divLoading').hide();
                $('#mappingDiv').empty();
                $('#defaultDiv').show();
            }
        });

        $(document).on('click', '#mapBtn', function () {
            var title = $(this).closest('tr').children('td:eq(2)').text().trim()
            $("#mapDialog").dialog({
                autoOpen: false
            });
           
            $.ajax({
                url: "@Url.Action("MappingArea_Enum", "MappingDiaBan")",
                dataType: "html",
                data: {
                    enumID: $(this).closest('tr').children('td:eq(1)').text().trim(),
                    groupCode: $('#GROUP').val().trim(),
                    enumName: $(this).closest('tr').children('td:eq(3)').text().trim()
                },
                success: function (html) {
                    //html = $(html);

                    //html.find('#add').click(function () {

                    //    var areaListVal = null;
                    //    areaListVal = [];

                    //    html.find('input[name="notmapped"]:checked').each(function () {
                    //        areaListVal.push($(this).attr('value'));
                    //    });
                    //    html.find('#AREA_ID').val(areaListVal);
                    //    if (areaListVal.length == 0) {
                    //        alert('Bạn cần chọn địa bàn để gán')
                    //        return false;
                    //    }
                    //    else
                    //        return confirm('Bạn có chắc muốn gán ' + areaListVal.length + ' địa bàn đã chọn không?');
                    //});

                    var box = bootbox.dialog({
                        className: 'dialog-lg',
                        title: "Cán bộ: " + title,
                        message: html,
                        buttons: {
                            success: {
                                label: "<i class='fa fa-edit'></i> Cập nhật",
                                className: "btn btn-sm btn-success",
                                callback: function () {
                                    var areaListVal = null;
                                    areaListVal = [];

                                    $('input[name="mapped"]:checked').each(function () {
                                        areaListVal.push($(this).attr('value'));
                                    });
                                    $('#AREA_ID').val(areaListVal);
                                    if (areaListVal.length == 0) {
                                        alert('Bạn cần chọn địa bàn để gán')
                                        return false;
                                    }
                                    else
                                        if (confirm('Bạn có chắc muốn cập nhật không?'))
                                            $('#MappingArea_EnumForm').submit();
                                }
                            },
                            danger: {
                                label: "<i class='fa fa-reply'></i> Hủy bỏ",
                                className: "btn btn-sm btn-default",
                                callback: function () {

                                }
                            }
                        }
                    });
                }
            });

            return false;

            @*$('#mapDialog').load('@Url.Action("MappingArea_Enum", "MappingDiaBan")', {
                enumID: $(this).closest('tr').children('td:eq(0)').text().trim(),
                groupCode: $('#GROUP').val().trim(),
                enumName: $(this).closest('tr').children('td:eq(2)').text().trim()
            }, function (data) {
                $('#mapDialog').dialog({
                    autoOpen: false,
                    draggable: true,
                    modal: true,
                    title: "Phân công cán bộ - địa bàn",
                    resizable: false,
                    maxheight: 500,
                    width: 900,
                    my: "center",
                    at: "center",
                    of: window
                });
            });
            $('#mapDialog').dialog('open');

            return false;*@
        });
    });
</script>

<div class="page-bar">
    <ul class="page-breadcrumb" style="padding: 4px;">
        <li>
            <i class="fa fa-home"></i>
            <a href="#"> Phân công cán bộ - địa bàn</a>
        </li>
    </ul>
</div>
<div class="row" >
    <div class="col-md-12">
        <div class="row">
            <div class="col-md-2">
                @Html.Label("Khu hành chính"
                     , new
                     {
                         @class = "text-center"
                                ,
                         placeholder = "Khu hành chính"

                     })
            </div>
            <div class="col-md-9">
                @ViewBag.ADM_UNIT
            </div>
        </div>
        <div class="row">
            <div class="col-md-2">
                @Html.Label("Chọn nhóm"
                     , new
                     {
                         @class = "text-center"
                                ,
                         placeholder = "Chọn nhóm"

                     })
            </div>
            <div class="col-md-9">
                @Html.HiddenFor(model => model.GROUP, new { id = "groupCode" })
                @Html.DropDownListFor(model => model.GROUP, new SelectList(string.Empty, "Value", "Text"), new { style = "width:200px;", @class = "form-control input-sm" })
            </div>
        </div>
        <div id="gridContent" align="center">
        </div>
        <br />
    </div>
</div>
<div id="mapDialog" align="center"></div>
<style>
    #MappingEnumGrid td:nth-child(2), th:nth-child(2) {
        display: none;
    }
    .ui-dialog {
        z-index: 3000;
    }

        .ui-dialog .ui-dialog-titlebar {
            color: white;
            background-color: #19A3A3;
        }
    #MappingEnumGrid tfoot tr:last-child td:first-child {
        text-align: left;
    }
    #MappingEnumGrid td:first-child {
        text-align: center;
    }
    div.pager {
        text-align: center;
        margin: 1em 0;
    }

        div.pager span {
            display: inline-block;
            width: 1.8em;
            height: 1.8em;
            line-height: 1.8;
            text-align: center;
            cursor: pointer;
            background: #66C2C2;
            color: white;
            margin-right: 0.5em;
        }

            div.pager span.active {
                background: white;
                color: #66C2C2;
            }
</style>
